<template>
  <div class="app-container">
    <el-form
      label-width="120px"
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
    >
      <el-row :gutter="15">
        <el-col :span="24">
          <MmvTitle title="年检"></MmvTitle>
        </el-col>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="车牌号" prop="carNo">
              <el-input :value="form.carNo" placeholder="请选择车辆" readonly>
                <el-button
                  v-if="!carId"
                  slot="append"
                  icon="el-icon-search"
                  @click="xuanzecheliang"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="行驶证注册日期"
              prop="drivingLicenseValidityDate"
            >
              <el-input
                :value="form.drivingLicenseValidityDate"
                placeholder="未上传行驶证"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="12">
          <el-form-item label="本次年检日期" prop="thisTimeInspectionTime">
            <el-date-picker
              v-model="form.thisTimeInspectionTime"
              placeholder="本次年检日期"
              type="date"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              @change="nextDate()"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下次年检日期" prop="nextInspectionTime">
            <el-date-picker
              v-model="form.nextInspectionTime"
              placeholder="下次年检日期"
              type="date"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年检费用" prop="inspectionAmount">
            <el-input
              v-model="form.inspectionAmount"
              placeholder="请输入年检费用"
              @keyup.native="
                form.inspectionAmount = oninput(form.inspectionAmount, 2)
              "
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="年检处理人" prop="inspectionAgent">
            <el-input
              v-model="form.inspectionAgent"
              placeholder="请输入年检处理人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件" prop="urlList">
            <ImageUpload v-model="form.urlList" :limit="3" isArray />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <MmvSelectCar
      v-model="showcheliang"
      @success="submitcheliang"
    ></MmvSelectCar>
  </div>
</template>

<script>
import * as inspectionApi from '@/api/maintenance/inspection'
import ImageUpload from '@/components/ImageUpload/index.vue'
import MmvChepaihao from '@/components/MmvUI/MmvChepaihao.vue'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvSelectCar from '@/views/components/selectCar.vue'

export default {
  components: {
    ImageUpload,
    MmvChepaihao,
    MmvTitle,
    MmvSelectCar,
  },
  props: ['carId'],
  data() {
    return {
      form: {
        carNo: '', // 车牌号
        vinNo: '', // 车架号
        carInfo: '', // 车辆信息
        thisTimeInspectionTime: '',
        nextInspectionTime: '',
        inspectionAmount: '', // 年检费用
        inspectionAgent: '', // 年审代理人
        vehicleAdministrativeOffice: '', // 车管所
        urlList: [], // 附件
      },
      rules: {
        carNo: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        vinNo: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        carInfo: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        thisTimeInspectionTime: [
          { required: true, message: '请选择车辆年审时间', trigger: 'blur' },
        ],
        nextInspectionTime: [
          { required: true, message: '请选择车辆年审时间', trigger: 'blur' },
        ],
        inspectionAmount: [
          { required: true, message: '请输入年检费用', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '价值为正数，且保留两位小数',
            trigger: 'blur',
          },
        ],

        vehicleAdministrativeOffice: [
          { required: true, message: '请输入车管所', trigger: 'blur' },
        ],
      },
      //
      showcheliang: false,
      _carId: 0,
    }
  },
  computed: {
    inspectionYear() {
      if (this.form.thisTimeInspectionTime) {
        return new Date(this.form.thisTimeInspectionTime).getFullYear() || ''
      }
      return ''
    },
    formData() {
      const formData = {
        id: this.form.id,
        carId: this.form.carId,
        carNo: this.form.carNo,
        thisTimeInspectionTime: this.form.thisTimeInspectionTime,
        nextInspectionTime: this.form.nextInspectionTime,
        inspectionAmount: this.form.inspectionAmount,
        inspectionAgent: this.form.inspectionAgent,
        vehicleAdministrativeOffice: this.form.vehicleAdministrativeOffice,
        urlList: this.form.urlList,
        drivingLicenseValidityDate: this.form.drivingLicenseValidityDate,
      }
      if (this.carId) {
        formData.carId = this.carId
        formData.isEdit = true
      }
      if (this._carId) {
        formData.carId = this._carId
      }
      return formData
    },
  },
  mounted() {
    if (this.carId) {
      this.getData()
    }
  },
  methods: {
    nextDate() {
      if (this.form.thisTimeInspectionTime) {
        var date1 = new Date(this.form.thisTimeInspectionTime)
        var date2 = new Date(
          this.form.drivingLicenseValidityDate ||
            this.form.thisTimeInspectionTime
        )
        var year = date1.getFullYear() + 2
        var month = date2.getMonth() + 1
        var day = date2.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        this.form.nextInspectionTime = year + '-' + month + '-' + day
      }
    },
    emitData(callback) {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false
        } else {
          callback(this.formData)
        }
      })
    },
    getData() {
      inspectionApi.getCarInfo(this.carId).then((response) => {
        this.form.carNo = response.data.carNo
        this.form.drivingLicenseValidityDate =
          response.data.drivingLicenseValidityDate
        if (this.form.drivingLicenseValidityDate) {
          var date1 = new Date()
          var date2 = new Date(this.form.drivingLicenseValidityDate)
          var year = date1.getFullYear()
          var month = date2.getMonth() + 1
          var day = date2.getDate()
          if (month < 10) {
            month = '0' + month
          }
          if (day < 10) {
            day = '0' + day
          }
          this.form.nextInspectionTime = year + '-' + month + '-' + day
        }
      })
    },
    xuanzecheliang() {
      this.showcheliang = true
    },
    submitcheliang(data) {
      this.showcheliang = false
      this.form.carId = data.carId
      this.form.carNo = data.carNo
      this.form.vinNo = data.vinNo
      this.form.carInfo = data.carInfo
    },
  },
}
</script>
